<!DOCTYPE html>
<html>

<head lang="en">
	<title>首页</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/jquery/jquery.min.js"></script>
	<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/reset.css" rel="stylesheet" >
	<link rel="stylesheet" href="/css/index.css" rel="stylesheet">
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/plugins/dialog2/dialog.min.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/queryAndBlank.js"></script>
	<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
	<script>
		$(function () {
			//发送请求获取状态为推荐的酒店
			$.get(baseUrl+"/grogshops",{state:1,pageSize:3},function (data) {
                $('#travelsCommends').renderValues(data,{
                    getHref:getHref
                });
                $('.carousel-item:first').addClass('active');
            })

            //发送请求获取状态为特价的酒店信息
            $.get(baseUrl+"/grogshops",{state:2,pageSize:4},function (data) {
                console.log(data.list);
                $(".strategyCommend").renderValues(data,{
                   getHref:getHref
			   })
            })


            //给时间选择框绑定点击事件,弹出日历
            $("#loginForm input[name='checkInTime']").click(function () {
                WdatePicker({
                    readOnly: true, //只读
                   // maxDate:  '<%=DateTime.Now.Date.ToString("yyyy-MM-dd")%>' //设置最大可选时间
                    minDate: new Date()
                });
            });

			//获取所有的地区
			$.get(baseUrl+"/regions" ,{pageSize:0},function (data) {
                var temp = '';
                $.each(data,function (index, ele) {
                    temp += '<option  value='+ele.id+' data-id='+ele.id+'>'+ele.name+'</option>';

                });
                $('.region').html(temp);


                $('.btn-search').click(function () {
                    //获取选中的下拉框的id
                    var did=$('select').val()
					window.location.href="/hotel.html?id="+did;
                    console.log(did);
                });
            })

			//给a标签绑定点击事件
			$(".getHref .buttons").click(function () {
                console.log("点击了");
            })


		});
	</script>
</head>
<body>


<div class="search-head">
	<div class="row nav-search">
		<div class="col-2">
			<a href="javascript:window.history.go(-1)">
				<span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
			</a>
		</div>
		<!--<div class="col-10">
			<div class="input-group-sm search">
				<input class="form-control searchBtn" placeholder="找酒店">
			</div>
		</div>-->
	</div>
</div>


<div class="container">
	<h6 class="module-title"></h6>
	<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
		<div id="travelsCommends">
			<div class="carousel-inner" render-loop="list">
				<div class="carousel-item">
					<a render-fun="getHref" render-key="list.id" data-url="/reserve.html?id=" >
						<img class="d-block w-100"  render-src="list.coverUrl" width="100%" height="200px">
					</a>
				</div>
			</div>
		</div>
		<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only"></span>
		</a>
		<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only"></span>
		</a>

		<div class="card card-container ">
			<h6 class="module-title" style="text-align: center">酒店搜索</h6>
			<form class="form-signin" id="loginForm" method="post">
				<!--<input type="text"  name="region" value="" class=" badge-pill" placeholder="出发目的地" style="width: 130px;">-->
				<select class=" badge-pill region" style="width: 130px;" name="regionId">

				</select>
				<input type="text"  name="checkInTime" value="" class=" badge-pill" placeholder="入住时间" style="width: 130px;">
				<input type="text"  name="checkInTime" value="" class=" badge-pill" placeholder="截止时间" style="width: 130px;">
				<!--<input type="button"  class="btn btn-success" value="查找">-->



			</form>
			<button class="btn btn-success btn-search">查找</button>

		</div>

	</div>


	<h1>
		<hr/>
	</h1>

	<div class="container strategyCommend">
		 <nobr>
			 <h6>特价酒店</h6>
		 </nobr>
		<div id="allTravels" render-loop="list">
			<!--detail-->
			<div class="row detail">
				<div class="col" >
					<!--<a render-fun="getHref" render-key="list.id" data-url="/travelContent.html?id=" >
						<h4 render-html="list.title"></h4>
					</a>-->
					<p>
						<a render-fun="getHref" render-key="list.id" data-url="/reserve.html?id=" >
							<img render-src="list.coverUrl" width="200" height="150" >
						 </a>
					</p>

				</div>
				<!--bigimg-->
				<div class="col bigimg">

					<a render-fun="getHref" render-key="list.id" data-url="/reserve.html?id=" >
						<p render-html="list.grogshopName" ></p>
					</a>
						<!--a标签不能跳转data-toggle="buttons"-->
						<div class="btn-group-toggle getHref"  >
							<div render-loop="list.grogshopTag">
								<label class="btn btn-outline-danger p-0" >
								<p autocomplete="off" style="height: 1px" render-html="list.grogshopTag.name"></p>
								</label><br>
							</div >
							<nobr render-html="list.price"></nobr><nobr ><i class="fa fa-jpy" aria-hidden="true"></i>起</nobr><br>
							<a class="btn btn-warning buttons" render-fun="getHref" render-key="list.id" data-url="/reserve.html?id=" >立即查看</a>
						</div>
				   </div >

				</div>
			</div>

		</div>
	</div>


</div>

<div id="absorbModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">

		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->



</body>

</html>